// @ts-nocheck
import React, { useState, useEffect } from 'react'
import { BrowserRouter as Router, Routes, Route, useNavigate, useLocation } from 'react-router-dom'
import { TabBar } from 'antd-mobile'
import { AppOutline, UserOutline, AddOutline } from 'antd-mobile-icons' // 引入 AddOutline
import HomePage from './pages/home'
import MyTravelsPage from './pages/myTravels'
import PublishPage from './pages/publish';
import TravelDetailPage from './pages/detail'
import LoginPage from './pages/auth/login';
import RegisterPage from './pages/auth/register';
import 'antd-mobile/es/global'
import './App.css'

const TabBarBottom: React.FC = () => {
  const navigate = useNavigate()
  const location = useLocation()
  const { pathname } = location

  // 判断当前是否在登录/注册页面，如果是则不显示底部导航栏
  const isAuthPage = pathname.includes('/auth/')
  // 判断当前是否在详情页面，如果是则不显示底部导航栏
  const isDetailPage = pathname.includes('/detail/')

  // 如果是登录/注册页面或详情页，则不显示底部导航栏
  if (isAuthPage || isDetailPage) {
    return null
  }

  const tabs = [
    {
      key: '/',
      title: '首页',
      icon: <AppOutline />,
    },
    {
      key: '/publish', // 新增发布按钮的 key
      title: '发布',   // 新增发布按钮的标题
      icon: <AddOutline />, // 使用 AddOutline 图标
    },
    {
      key: '/my',
      title: '我的',
      icon: <UserOutline />,
    },
  ]

  const handleTabChange = (key: string) => {
    navigate(key)
  }

  return (
    <TabBar activeKey={pathname} onChange={handleTabChange}>
      {tabs.map(item => (
        <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
      ))}
    </TabBar>
  )
}

function App() {
  return (
    <Router>
      <div className="app-container">
        <div className="app-content">
          <Routes>
            <Route path="/" element={<HomePage />} />
            <Route path="/my" element={<MyTravelsPage />} />
            <Route path="/detail/:id" element={<TravelDetailPage />} />
            <Route path="/publish" element={<PublishPage />} />
            <Route path="/auth/login" element={<LoginPage />} />
            <Route path="/auth/register" element={<RegisterPage />} />
          </Routes>
        </div>
        <div className="app-tabbar">
          <TabBarBottom />
        </div>
      </div>
    </Router>
  )
}

export default App;